<template>
	<div style="height: 100%; overflow: auto;background-color: papayawhip;">
		<div class="weui-panel">
			<a class="weui-cell">
				<div class="weui-cell__hd" style="width: 20%;">
					<img :src="wxUser.headImgUrl" alt="" style="width: 90%;margin-right: 16px;display: block;">
				</div>
				<div class="weui-cell__bd" style="padding: 20px;text-align: left;">
					<p>{{wxUser.nickname}}</p>
					<div class="weui-progress">
						<div class="weui-progress__bar">
							<div ref="jf_progress" class="weui-progress__inner-bar js_progress" ></div>
						</div>
					</div>
					<span style="font-family:'arial black';font-size: 11px;">会员等级：{{memberInfo.memberTypeName}} {{memberInfo.jf_total}}/{{memberInfo.member_jf_up}}</span>
				</div>
			</a class="weui-cell">
			<a class="weui-cell">
				<div class="weui-grids" style="width: 100%;padding: 0.625rem;">
					<a href="javascript:" class="weui-grid">
						<div class="weui-grid__icon">
							<img src="http://39.108.190.110/static/dingdan.png" alt="">
						</div>
						<p class="weui-grid__label">我的订单</p>
					</a>
					<a href="javascript:" class="weui-grid">
						<div class="weui-grid__icon">
							<img src="http://39.108.190.110/static/fukuan.png" alt="">
						</div>
						<p class="weui-grid__label">待付款</p>
					</a>
					<a href="javascript:" class="weui-grid">
						<div class="weui-grid__icon">
							<img src="http://39.108.190.110/static/shiyong.png" alt="">
						</div>
						<p class="weui-grid__label">待使用</p>
					</a>
				</div>
			</a>
			<a @click="goWallet" class="weui-cell  weui-cell_access" href="javascript:">
				<div class="weui-cell__bd" style="text-align: left;">
					<p>余额</p>
				</div>
				<div class="weui-cell__ft">
				</div>
			</a>
			<a @click="goCoupon" class="weui-cell  weui-cell_access" href="javascript:">
				<div class="weui-cell__bd" style="text-align: left;">
					<p>优惠券</p>
				</div>
				<div class="weui-cell__ft">
				</div>
			</a>
			<a class="weui-cell  weui-cell_access" @click="goUserInfo">
				<div class="weui-cell__bd" style="text-align: left;">
					<p>个人中心</p>
				</div>
				<div class="weui-cell__ft">
				</div>
			</a>
		</div>
	</div>
</template>

<script>
	import {
		getUserMemberInfo
	} from '@/apis/wx/weixinJs'
	import constant from '@/utils/constant.js'
	import wxConst from '@/utils/wxContants.js'
	import apis from '@/utils/apis.js'
	export default {
		name: "userCenter",
		data() {
			return {
				wxUser: {},//
				memberInfo: {}, //会员积分信息
			}
		},
		created() {
			
			let token = localStorage.getItem(constant.WX_TOKEN);
			let userinfo = JSON.parse(localStorage.getItem(token))
			if (JSON.stringify(userinfo) == "{}") {
				this.$router.replace({
					name: 'wxLogin',
					params: {
						url: this.$router.history.current.fullPath
					}
				})
			}
			this.wxUser = userinfo.userInfo.wxUser;
			this.init();
		},
		mounted() {
			console.log("everyone")
		},
		methods: {
			//去钱包页面
			goCoupon(){
				this.$router.push({name:"myCoupon"})
				
			},
			//去钱包页面
			goWallet(){
				this.$router.push({name:"wxUserWallet"})
				
			},
			//去个人页面
			goUserInfo(){
				this.$router.push({name:"wxUserInfoPage"})
			},
			getMemberTypeName(code){
				let name ="";
				for (var i in wxConst.memberType){
					if (wxConst.memberType[i].code ==code ) {
						name = wxConst.memberType[i].name;
						break;
					}
				}
				return name;
			},
			init(){
				this.getMemberType();
			},
			//查询会员等级信息
			getMemberType() {
				this.$showLoading({showLoadingToastFlag:true})
				getUserMemberInfo(apis.getUserMemberInfo,{"openid":this.wxUser.openid,"account":this.wxUser.wxAccount}).then(res =>{
					if (res.resultCode == constant.SUCCESS && res.data) {
						this.memberInfo = res.data;
						this.memberInfo["memberTypeName"] = this.getMemberTypeName(this.memberInfo.member_cur_level);
						//进度条
						this.$refs['jf_progress'].style.width= this.memberInfo.jf_total /this.memberInfo.member_jf_up * 100 +"%";
						this.$hideLoading();
					}
				}).catch( err =>{
					this.$hideLoading();
				})
			},

		}
	}
</script>

<style>
	/* .wd{
		position: fixed;
	} */
</style>
